<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>雅思写作练习系统 - IELTS Writing Practice</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&display=swap');
        
        body {
            font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        }
        
        .gradient-text {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .card-hover {
            transition: all 0.3s ease;
        }
        
        .card-hover:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .fade-in {
            animation: fadeIn 0.6s ease-out;
        }
        
        .pulse-slow {
            animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
        
        textarea::placeholder {
            color: #9CA3AF;
            font-size: 0.95rem;
        }
    </style>
</head>
<body class="bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 min-h-screen">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-lg border-b border-gray-200">
        <div class="max-w-7xl mx-auto px-6 py-4">
            <div class="flex justify-between items-center">
                <!-- Logo和标题 -->
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 bg-gradient-to-br from-blue-600 to-indigo-600 rounded-lg flex items-center justify-center shadow-md">
                        <span class="text-2xl">📝</span>
                    </div>
                    <div>
                        <h1 class="text-2xl font-bold gradient-text">
                            IELTS Writing
                        </h1>
                        <p class="text-xs text-gray-500">雅思写作练习系统</p>
                    </div>
                </div>

                <!-- 导航按钮 -->
                <div class="flex items-center gap-3">
                    <div class="hidden md:flex items-center bg-gradient-to-r from-blue-50 to-indigo-50 px-4 py-2 rounded-lg border border-blue-200">
                        <span class="text-sm text-gray-600">欢迎,</span>
                        <span class="ml-1 font-semibold text-blue-700">测试用户</span>
                    </div>
                    <button class="px-5 py-2.5 rounded-lg font-medium transition-all transform hover:scale-105 bg-gradient-to-r from-blue-600 to-indigo-600 text-white shadow-lg">
                        <span class="flex items-center">
                            ✍️ <span class="ml-2">开始练习</span>
                        </span>
                    </button>
                    <button class="px-5 py-2.5 rounded-lg font-medium transition-all transform hover:scale-105 bg-white text-gray-700 hover:bg-gray-50 border-2 border-gray-200">
                        <span class="flex items-center">
                            📚 <span class="ml-2">历史记录</span>
                        </span>
                    </button>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主内容区 -->
    <div class="max-w-7xl mx-auto px-4 py-8">
        <!-- 页面标题 -->
        <div class="text-center mb-10 fade-in">
            <div class="inline-flex items-center justify-center mb-4">
                <div class="bg-gradient-to-r from-blue-600 to-indigo-600 text-white p-4 rounded-2xl shadow-lg pulse-slow">
                    <span class="text-5xl">✍️</span>
                </div>
            </div>
            <h1 class="text-5xl font-extrabold gradient-text mb-3">
                雅思写作练习
            </h1>
            <p class="text-xl text-gray-600 font-medium">IELTS Writing Practice</p>
            <div class="mt-4 inline-block bg-white px-6 py-2 rounded-full shadow-md border-2 border-blue-100">
                <span class="text-sm text-gray-600">📊 提升您的写作技能，冲刺雅思高分</span>
            </div>
        </div>

        <!-- 主答题区域 -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- 左侧：题目区域 -->
            <div class="lg:col-span-1">
                <div class="bg-white rounded-2xl shadow-2xl border-2 border-blue-100 card-hover sticky top-6 fade-in">
                    <!-- 题目标题栏 -->
                    <div class="bg-gradient-to-r from-blue-600 to-indigo-600 text-white px-6 py-4 rounded-t-2xl">
                        <div class="flex items-center">
                            <span class="text-3xl mr-3">📄</span>
                            <div>
                                <h3 class="text-sm font-medium opacity-90">考试题目</h3>
                                <h2 class="text-xl font-bold">观点论述 - 教育话题</h2>
                            </div>
                        </div>
                    </div>

                    <!-- 题目内容 -->
                    <div class="p-6">
                        <!-- 标签 -->
                        <div class="flex gap-2 mb-4">
                            <span class="px-3 py-1.5 bg-gradient-to-r from-blue-100 to-blue-200 text-blue-800 rounded-lg text-xs font-bold uppercase tracking-wide">
                                Task 2
                            </span>
                            <span class="px-3 py-1.5 bg-gradient-to-r from-yellow-100 to-yellow-200 text-yellow-800 rounded-lg text-xs font-bold uppercase tracking-wide">
                                Medium
                            </span>
                        </div>

                        <!-- 题目正文 -->
                        <div class="bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 rounded-xl p-5 mb-5 border-2 border-blue-100">
                            <p class="text-gray-800 leading-relaxed text-base font-medium">
                                Some people think that students should be required to do unpaid work in their free time to help their local community. To what extent do you agree or disagree?
                            </p>
                            <p class="text-gray-700 mt-3 text-sm">
                                有人认为学生应该在空闲时间做无偿工作来帮助当地社区。你在多大程度上同意或不同意这个观点？
                            </p>
                        </div>

                        <!-- 要求信息 -->
                        <div class="space-y-3">
                            <div class="bg-white border-2 border-orange-200 rounded-xl p-4">
                                <div class="flex items-center">
                                    <div class="bg-orange-100 p-2 rounded-lg mr-3">
                                        <span class="text-2xl">⏱️</span>
                                    </div>
                                    <div>
                                        <p class="text-xs text-gray-500 font-medium">建议时间</p>
                                        <p class="text-lg font-bold text-gray-800">40 分钟</p>
                                    </div>
                                </div>
                            </div>
                            <div class="bg-white border-2 border-green-200 rounded-xl p-4">
                                <div class="flex items-center">
                                    <div class="bg-green-100 p-2 rounded-lg mr-3">
                                        <span class="text-2xl">📝</span>
                                    </div>
                                    <div>
                                        <p class="text-xs text-gray-500 font-medium">字数要求</p>
                                        <p class="text-lg font-bold text-gray-800">至少 250 字</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 提示 -->
                        <div class="mt-5 bg-gradient-to-r from-yellow-50 to-amber-50 border-l-4 border-yellow-400 p-4 rounded-r-xl">
                            <div class="flex">
                                <span class="text-2xl mr-2">💡</span>
                                <div>
                                    <p class="text-xs font-semibold text-yellow-800 mb-1">写作提示</p>
                                    <p class="text-sm text-gray-700">注意论点清晰、逻辑连贯、语法准确</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧：答题区域 -->
            <div class="lg:col-span-2 fade-in" style="animation-delay: 0.2s">
                <div class="bg-white rounded-2xl shadow-2xl border-2 border-indigo-100 overflow-hidden card-hover">
                    <!-- 答题区标题栏 -->
                    <div class="bg-gradient-to-r from-indigo-600 to-purple-600 text-white px-6 py-4">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <span class="text-3xl mr-3">✍️</span>
                                <div>
                                    <h3 class="text-sm font-medium opacity-90">写作答题区</h3>
                                    <h2 class="text-xl font-bold">Your Answer</h2>
                                </div>
                            </div>
                            <div class="px-5 py-2.5 rounded-full font-bold text-lg shadow-lg backdrop-blur-sm bg-green-500/90 text-white">
                                <div class="flex items-center gap-2">
                                    <span class="text-sm opacity-90">字数</span>
                                    <span class="text-2xl font-extrabold" id="wordCount">0</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 答题内容区 -->
                    <div class="p-6">
                        <!-- 文本输入框 -->
                        <textarea 
                            id="essayInput"
                            placeholder="✨ 开始您的写作...

📌 写作建议：
• 引言段：简述背景，明确观点
• 主体段：2-3个论点，每个论点配合例证
• 结论段：总结观点，呼应主题

💡 评分要点：
• 任务完成度 - 回应题目所有要求
• 连贯性 - 逻辑清晰，过渡自然  
• 词汇丰富度 - 使用多样化表达
• 语法准确性 - 避免常见错误"
                            class="w-full h-[500px] p-6 bg-gradient-to-br from-white to-blue-50/30 border-2 border-indigo-200 rounded-2xl resize-none focus:ring-4 focus:ring-indigo-200 focus:border-indigo-400 transition-all outline-none text-gray-800 leading-relaxed text-lg font-medium shadow-inner"
                        ></textarea>

                        <!-- 状态提示条 -->
                        <div class="mt-4 flex items-center justify-between bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl p-4 border border-indigo-100">
                            <div class="flex gap-3" id="statusBadge">
                                <span class="flex items-center text-red-600 font-semibold bg-red-50 px-4 py-2 rounded-lg border-2 border-red-200">
                                    <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
                                    </svg>
                                    字数不足
                                </span>
                            </div>

                            <!-- 操作按钮 -->
                            <div class="flex gap-3">
                                <button class="px-5 py-2.5 bg-white text-gray-700 rounded-xl hover:bg-gray-50 transition-all font-semibold border-2 border-gray-300 hover:border-gray-400 shadow-md hover:shadow-lg">
                                    📚 历史记录
                                </button>
                                <button class="px-8 py-2.5 bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 text-white rounded-xl hover:from-indigo-700 hover:via-purple-700 hover:to-pink-700 transition-all font-bold shadow-xl hover:shadow-2xl transform hover:-translate-y-1 hover:scale-105">
                                    🚀 提交并获取AI评分
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="bg-white border-t mt-12 shadow-inner">
        <div class="max-w-7xl mx-auto px-4 py-8">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="text-center md:text-left mb-4 md:mb-0">
                    <p class="text-gray-700 font-semibold">雅思写作练习系统 © 2024</p>
                    <p class="text-sm text-gray-500 mt-1">助力您的雅思写作之路</p>
                </div>
                <div class="flex items-center space-x-6">
                    <div class="text-center">
                        <p class="text-xs text-gray-500">技术栈</p>
                        <div class="flex items-center space-x-2 mt-1">
                            <span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded font-medium">React</span>
                            <span class="px-2 py-1 bg-green-100 text-green-700 text-xs rounded font-medium">Node.js</span>
                            <span class="px-2 py-1 bg-purple-100 text-purple-700 text-xs rounded font-medium">MongoDB</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        const essayInput = document.getElementById('essayInput');
        const wordCountEl = document.getElementById('wordCount');
        const statusBadge = document.getElementById('statusBadge');

        // 实时字数统计
        essayInput.addEventListener('input', function() {
            const text = this.value.trim();
            const words = text.split(/\s+/).filter(word => word.length > 0);
            const count = words.length;
            
            wordCountEl.textContent = count;
            
            // 更新状态徽章
            if (count < 50) {
                statusBadge.innerHTML = `
                    <span class="flex items-center text-red-600 font-semibold bg-red-50 px-4 py-2 rounded-lg border-2 border-red-200">
                        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
                        </svg>
                        字数不足
                    </span>
                `;
                wordCountEl.parentElement.className = 'px-5 py-2.5 rounded-full font-bold text-lg shadow-lg backdrop-blur-sm bg-red-500/90 text-white';
            } else if (count < 250) {
                statusBadge.innerHTML = `
                    <span class="flex items-center text-yellow-700 font-semibold bg-yellow-50 px-4 py-2 rounded-lg border-2 border-yellow-200">
                        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                        </svg>
                        继续加油
                    </span>
                `;
                wordCountEl.parentElement.className = 'px-5 py-2.5 rounded-full font-bold text-lg shadow-lg backdrop-blur-sm bg-yellow-400/90 text-gray-900';
            } else {
                statusBadge.innerHTML = `
                    <span class="flex items-center text-green-700 font-semibold bg-green-50 px-4 py-2 rounded-lg border-2 border-green-200 animate-pulse">
                        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                        </svg>
                        字数达标！可以提交
                    </span>
                `;
                wordCountEl.parentElement.className = 'px-5 py-2.5 rounded-full font-bold text-lg shadow-lg backdrop-blur-sm bg-green-500/90 text-white';
            }
        });

        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({ behavior: 'smooth' });
                }
            });
        });
    </script>
</body>
</html>

